<div class="controls">
    <a class="prev"></a>
    <div class="images scrollable popup-image">
        <div class="items">
            <?php foreach ($pimgages as $img): ?>
                <div class="item">
                    <div>
                        <?php Util::thumbnailImage($pname, $img, array(605, 500)) ?>
                    </div>
                </div>
            <?php endforeach ?>
        </div>
    </div>
    <a class="next"></a>
    <div class="buttons">
        <div>
            <div class="gradient left">
                <a class="prev-product" onclick='javascript:void(0)'>
                    <?php
                    if (isset($typename)):
                        echo Yii::t('default', 'Previous {item}', array('{item}' => $typename));
                    else:
                        echo Yii::t('default', 'Previous');
                    endif
                    ?>
                </a>
            </div>
            <div class="gradient right">
                <a class="next-product" onclick='javascript:void(0)'>
                    <?php
                    if (isset($typename)):
                        echo Yii::t('default', 'Next {item}', array('{item}' => $typename));
                    else:
                        echo Yii::t('default', 'Next');
                    endif
                    ?>
                </a>
            </div>
        </div>
    </div>
    <div class="loading">
    </div>
</div>
<div class="content">
    <div class="title">
        <?php echo $pname ?>      
    </div>
    <div>
        <?php echo $pcontent ?>
    </div>
    <div>
    </div>
</div>
<script type="text/javascript">
                    jQuery(function() {
                        jQuery("div.images.scrollable").scrollable();

                        jQuery('.controls .prev').mouseover(function() {
                            jQuery(this).css('background-image', 'url("./css/img/left-arrow.png")');
                            jQuery('.controls .next').css('background-image', 'url("./css/img/right-arrow.png")');
                        }).mouseout(function() {
                            jQuery(this).css('background-image', 'none');
                            jQuery('.controls .next').css('background-image', 'none');
                        });
                        jQuery('.controls .next').mouseover(function() {
                            jQuery('.controls .prev').css('background-image', 'url("./css/img/left-arrow.png")');
                            jQuery(this).css('background-image', 'url("./css/img/right-arrow.png")');
                        }).mouseout(function() {
                            jQuery('.controls .prev').css('background-image', 'none');
                            jQuery(this).css('background-image', 'none');
                        });

                        var prev = jQuery('.buttons .prev-product');
                        var next = jQuery('.buttons .next-product');

                        CURRENT = IDS.indexOf(<?php echo $pid ?>);
                        var currentUrl = '<?php
        if (isset($type)):
            echo $this->createUrl('product/ajaxView', array('id' => $pid, 'productkey' => $pseokey, 'type' => $type));
        else:
            echo $this->createUrl('product/ajaxView', array('id' => $pid, 'productkey' => $pseokey));
        endif
        ?>';

                        function sendAjaxRequest(id) {
                            jQuery.ajax({
                                url: currentUrl.replace('/product-ajax-<?php echo $pid ?>', '/product-ajax-' + id),
                                beforeSend: function() {
                                    jQuery('.controls .loading').css('display', 'block');
                                },
                                cache: false,
                                success: function(html) {
                                    jQuery('#product-overlay .overlay-content').html(html);
                                }
                            });
                        }
                        ;

                        if (!hasPreviousID()) {
                            prev.addClass('disabled');
                        } else {
                            prev.click(function() {
                                var id = IDS[CURRENT - 1];
                                sendAjaxRequest(id);
                            });
                        }

                        if (!hasNextID()) {
                            next.addClass('disabled');
                        } else {
                            next.click(function() {
                                var id = IDS[CURRENT + 1];
                                sendAjaxRequest(id);
                            });
                        }

                        jQuery(document).keyup(function(event) {
                            if (event.which == 37 && !prev.hasClass('disabled')) {
                                /* left arrow */
                                prev.click();
                            } else if (event.which == 39 && !next.hasClass('disabled')) {
                                /* right arrow */
                                next.click();
                            }
                        });
                    });
</script>
